<template>
  <div class="app-container home">
    <div class="app-container">
      <div class="echart-header">
        <div class="echart-header-list">
          <div class="echart-header-list-left"></div>
          <div class="echart-header-list-right">
            <p>今日预约</p>
            <p>{{ today }}</p>
          </div>
        </div>
        <div class="echart-header-list">
          <div class="echart-header-list-left"></div>
          <div class="echart-header-list-right">
            <p>昨日预约</p>
            <p>{{ yestoday }}</p>
          </div>
        </div>
        <div class="echart-header-list">
          <div class="echart-header-list-left"></div>
          <div class="echart-header-list-right">
            <p>预约总数</p>
            <p>{{ count }}</p>
          </div>
        </div>
        <div class="echart-header-list">
        </div>
      </div>
      <div class="echartsBody">
        <div style="padding:10px;display: flex;align-items: center;">
<!--          <el-radio-group v-model="timeType" @change="getEchartsFn" size="small">-->
<!--            <el-radio-button :label="item.id" v-for="item in tabline" :key="item.id">{{ item.name }}</el-radio-button>-->
<!--          </el-radio-group>-->
          <el-date-picker
            v-model="value1"
            type="monthrange"
            size="small"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
          value-format="yyyy-MM"
          style="margin-left:10px">
          </el-date-picker>
          <el-button size="small" @click="searchFn" style="margin-left:10px">查询</el-button>
        </div>
        <div class="echarts_box">
          <div id="echarts_user_test" class="home_top_echarts"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import {indexEcharts, countNum} from "@/api/index"
var date = new Date(); // Sat Jul 06 2019 19:59:27 GMT+0800 (中国标准时间)
//获取当前年份：
var year = date.getFullYear();
//获取当前月份：
var month = date.getMonth() + 1;
var lastDay = 30;
var arr = ["01","03","05","07","08","10","12"];
if(month<10){
  month = `0${month}`;
}
export default {
  name: "Index",
  data() {
    return {
      // 版本号
      version: "3.8.2",
      timeType: 1,
      today: 0,
      yestoday: 0,
      count: 0,
      value1: [year+"-"+month,year+"-"+month],
      tabline: [
        {
          name: '三个月',
          id: 1
        },
        {
          name: '半年',
          id: 2
        },
        {
          name: '一年',
          id: 3
        }
      ]
    };
  },
  created() {
    this.getEchartsFn()
    this.getDataFn()

  },
  methods: {
    getDataFn() {
      countNum().then(res => {
        this.today = res.data.today==null?0:res.data.today
        this.yestoday = res.data.yestoday==null?0:res.data.yestoday
        this.count = res.data.all==null?0:res.data.all
      })
    },
    searchFn(){
      if(this.value1 && this.value1.length){
        console.log('开始月份：', this.value1[0])
        console.log('结束月份：', this.value1[1])
        this.getEchartsFn() // 请求数据
      }
    },
    getEchartsFn() {
      console.log(arr.indexOf(this.value1[1].split("-")[1]))
      if (!arr.indexOf(this.value1[1].split("-")[1])){
        lastDay = 31;
      }
      if (this.value1[1].split("-")[1]=="02"){
        lastDay = 28;
      }
      indexEcharts({startTime: this.value1[0]+"-01",endTime:this.value1[1]+"-"+lastDay}).then(res => {
        console.log('图形', res)
        let list_ = res.data
        let x_name = []
        let x_bar = []
        let x_line = []
        for(let item of list_){
          x_name.push(item.time)
          x_bar.push(item.sum)
          x_line.push(item.sum)
        }
        this.echartsthreeTest(x_name, x_bar, x_line)
      })
      let x_name = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日']
      let x_bar = [33, 44, 22, 66, 77, 99, 11]
      let x_line = [22, 33, 77, 44, 99, 34, 56]
      this.echartsthreeTest(x_name, x_bar, x_line)
    },
    echartsthreeTest(name, barData, lineData) {
      this.$nextTick(function () {
        let myChart = echarts.init(document.getElementById('echarts_user_test'))
        // let rotate_ = 0
        // if (data_.length > 7) {
        //   rotate_ = '-20'
        // }
        let option = {
          legend: {//图例组件
            x: 'center',
            y: 'top',
            show: true,
            textStyle: {//图例的公用文本样式。
              fontSize: 14,
              color: "#333",
            },
            itemGap: 20,//图例每项之间的间隔。横向布局时为水平间隔，纵向布局时为纵向间隔。
            data: ['正常', '曲线'],//图例的数据数组。
            inactiveColor: '#ccc',//图例关闭时的颜色。
          },
          tooltip: {
            show: true,
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          color: ['#20a0ff', '#FFAF51'],
          grid: {
            left: '3%',
            right: '4%',
            bottom: '6%',
            containLabel: true
          },
          xAxis: {
            name: '日期',
            type: 'category',
            axisTick: {show: false}, // 分割线
            axisLine: {show: true, lineStyle: {color: '#333'}},
            axisLabel: {lineStyle: {color: '#333'}},
            splitLine: {//分割线配置
              show: false,
              lineStyle: {
                color: "#000",
              }
            },
            show: true,
            interval: 5,
            data: name
          },
          yAxis: {
            name: '数值',
            type: 'value',
            axisLine: {//y轴线的颜色以及宽度
              show: true,
              lineStyle: {
                color: "#000",
                width: 1,
                type: "solid"
              },
            },
          },
          series: [{
            name: '正常',
            barMaxWidth: '40',
            data: barData,
            type: 'bar',
            itemStyle: {
              normal: {
                label: {
                  show: true,  //开启显示
                  position: 'top',  //在上方显示
                  textStyle: {  //数值样式
                    color: 'black',
                    fontSize: 16
                  }
                }
              }
            },
          },
            {
              name: '曲线',
              type: 'line',
              yAxisIndex: 0,    //这里要设置哪个y轴，默认是最左边的是0，然后1，2顺序来。
              data: lineData,
              symbolSize: 10,
              itemStyle: {
                normal: {
                  label: {
                    show: true,
                    position: 'top',
                    textStyle: {
                      fontSize: '14',
                      color: '#FFAF51',
                    }
                  }
                },
              },
            }
            ]
        }
        myChart.setOption(option)
      })
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
  },
};
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }

  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }

  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}

.app-container {
  height: 100vh;
  background: #eee;
}

.echartsBody {
  margin-top: 20px;
  background: #fff;
}

.echarts_box {
  width: 100%;
  height: 500px;
  background: #fff;

  padding-top: 20px;
}

#echarts_user_test {
  width: 100%;
  height: 100%;
}

.echart-header {
  display: flex;
}

.echart-header-list {
  margin-right: 10px;
  flex: 1;
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  padding: 15px;
  box-sizing: border-box;
  box-shadow: 0 0 4px #ddd;
}

.echart-header-list:last-child {
  margin-right: 0;
  background: none;
  border: none;
  box-shadow: none;
}

.echart-header-list-left {
  flex: 1;
}

.echart-header-list-right {
  felx: 1
}

.echart-header-list-right p {
  margin: 0 0 10px;
  padding: 0;
  color: #999;
}

.echart-header-list-right p:last-child {
  color: #333;
  font-size: 18px;
  margin-bottom: 0;
}
</style>

